<!--  -->
<template>
  <div>
    <c-title :text="pageTitle"></c-title>
    <van-sticky :offset-top="40">
      <van-search v-model="keyword" :placeholder="activeOptions.placeholder" @search="onSearch"/>
    </van-sticky>

    <div class="padding-10">
      <div v-for="item in info" :key="item.id" class="padding-10 bg-ffffff margin-bottom-8 border-radius-8">
        <div class="flex-a-c flex-j-sb">
          <div class="flex-a-c">
            <img :src="item.avatar||item.store_thumb" class="himg margin-right-6" alt="" />
            <div class="t-l flex-column">
              <div>{{ item.nickname||item.store_name }}</div>
              <div class="f-12" v-if="item.member_id">ID: {{ item.member_id }}</div>
            </div>
          </div>
          <van-switch v-model="item.status" v-if="activeOptions.switch" size="20px" active-color='var(--themeBaseColor)' @click="changeStatus(item.id)"/>
        </div>

        <div class="content-item t-l margin-top-8" v-if="identity != 'clerk'">
          <div class="item line-clamp-1" v-if="item.promoter_nickname">所属推广者: {{ item.promoter_nickname || '--'}}</div>
          <div class="item" v-if="item.clerk_count">店员数量: {{ item.clerk_count || '0'}}</div>
          <div class="item">订单数: {{ item.order_count || '0'}}</div>
          <div class="item">订单总额: {{ item.order_price || '0'}}</div>
          <div class="item">销售会员卡总额: {{ item.card_price || '0'}}</div>
          <div class="item">销售会员卡数量: {{ item.card_count|| '0' }}</div>
        </div>
      </div>
    </div>

    <div v-if="finished" style="color: #999;padding-bottom:1rem;" class="t-c">没有更多~</div>
    <div style="height: 140px;"></div>

    <div class="bottom-btn" @click="addPop = true" v-if="activeOptions.search">
      <van-button round block color="var(--themeBaseColor)">添加{{pageTitle}}</van-button>
    </div>

    <van-popup v-model="addPop" class="pop-base-class" position="bottom" round style="background-color: #F5F5F5;" closeable>
      <div class="pop-base-title">添加{{pageTitle}}</div>
      <div class="pop-base-content">
        <van-cell-group inset>
          <van-field
            v-model="member_id"
            required
            label="会员ID"
            placeholder="请输入会员ID"
            @input='inputChange'
            :error-message=" `${search_member.nickname?'昵称：'+ search_member.nickname :''}`"
          />
        </van-cell-group>
      </div>
      <div class="pop-base-bottom flex" @click="addMember">
        <van-button round type="danger" block color="var(--themeBaseColor)" style="height: 40px;">确认</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { debounce } from "lodash";
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      identity: "",
      finished: false,
      isLoadMore: true,
      current_page: 1,
      last_page: 1,

      activeOptions: {},
      pageTitle: '',
      keyword: "",
      addPop: false,
      member_id: '',
      search_member: {},

      info: []
    };
  },

  activated() {
    this.initPage();
    this.getData();
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    initPage() {
      this.keyword = '';
      this.pageOptions = {
        promoter: {
          placeholder: '搜索会员id/昵称',
          api: "plugin.business-district.frontend.controllers.agent.promoter-list",
          name: "推广者",
          search: {
            key: "promoter_member_id",
            api: "plugin.business-district.frontend.controllers.agent.check-promoter",
            add: 'plugin.business-district.frontend.controllers.agent.add-promoter'
          },
          switch: {
            api: "plugin.business-district.frontend.controllers.agent.operate-promoter",
            key: "id"
          }
        },
        clerk: {
          placeholder: '搜索会员id/昵称',
          api: "plugin.business-district.frontend.controllers.store.clerk-manage",
          name: "店员",
          search: {
            key: "clerk_member_id",
            api: "plugin.business-district.frontend.controllers.store.check-clerk",
            add: 'plugin.business-district.frontend.controllers.store.add-clerk'
          },
          switch: {
            api: "plugin.business-district.frontend.controllers.store.operate-clerk",
            key: "id"
          }
        },
        agentStore: {
          placeholder: '搜索门店名称',
          api: "plugin.business-district.frontend.controllers.agent.store-manage",
          name: "门店管理" //区域代理的门店管理
        },
        promoterStore: {
          placeholder: '搜索门店名称',
          api: "plugin.business-district.frontend.controllers.promoter.store-manage",
          name: "门店管理" //推广者的门店管理
        },
      };
      this.activeOptions = this.pageOptions[this.$route.params.identity];
      this.identity = this.$route.params.identity;
      this.pageTitle = this.activeOptions.name;
      this.fun.setWXTitle(this.pageTitle);
    },
    init(){
      this.finished = false;
      this.current_page = 1;
      this.last_page = 1;
      this.info = [];
      this.isLoadMore = true;
    },
    async getData() {
      let json = { keyword: this.keyword };
      if(this.$route.query.agent_id) json.agent_id = this.$route.query.agent_id;
      let { result, msg, data } = await $http.get(this.activeOptions.api, json ,".");
      if(result == 0) return this.$toast(msg);

      this.info = data.data || [];

      this.current_page = data.current_page;
      this.last_page = data.last_page;
      if (this.current_page == this.last_page) {
        this.finished = true;
      }
    },
    onSearch(){
      this.init();
      this.getData();
    },
    inputChange:debounce(function(event)  {
      this.inputMember();
    },800),
    async inputMember(){
      let { msg, result, data } = await $http.get(this.activeOptions.search.api, {[this.activeOptions.search.key]: this.member_id,agent_id: this.$route.query.agent_id||''}, ".");
      if (result == 0) {
        return this.$toast(msg);
      }
      this.search_member = data;
    },
    async addMember(){
      if(!this.member_id) return this.$toast('请输入会员ID');
      let { msg, result, data } = await $http.get(this.activeOptions.search.add, {[this.activeOptions.search.key]: this.member_id,agent_id: this.$route.query.agent_id||''}, ".");
      if (result == 0) {
        return this.$toast(msg);
      }
      this.addPop = false;
      this.onSearch();
    },
    async changeStatus(id){
      let { msg, result, data } = await $http.get(this.activeOptions.switch.api, {[this.activeOptions.switch.key]: id,agent_id: this.$route.query.agent_id||''}, ".");
      if (result == 0) {
        return this.$toast(msg);
      }
      this.onSearch();
    },

    async getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      let json = { keyword: this.keyword, page };
      if(this.$route.query.agent_id) json.agent_id = this.$route.query.agent_id;

      let { result, msg, data } = await $http.get(this.activeOptions.api, json, ".");
      this.isLoadMore = true;
      if (result == 0) return this.$toast(msg);
      this.info = this.info.concat(data.data);
      this.current_page = data.current_page;
    },
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.bg-ffffff {
  background: #ffffff;
}
.border-radius-8 {
  border-radius: 8px;
}
.himg {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 100%;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
  }
}
.content-item {
  display: flex;
  flex-wrap: wrap;
  line-height: 22px;
  .item {
    width: 50%;
    font-size: 12px;
  }
  .item:nth-child(2n) {
    text-align: right;
  }
}
.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.625rem;
  background: #fff;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
}
.pop-base-class {
  .pop-base-title {
    margin: 18px 12px 12px;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
  }
  .pop-base-content {
    min-height: 45vh;
    max-height: 55vh;
    overflow: scroll;
    padding: 0 0 5rem;
  }
  .pop-base-bottom {
    padding: 0.625rem 0.875rem;
    background: #ffffff;
  }
}
</style>
